<template>
    <div class="sy-boxg-bl">
        <div class="sy-boxg-blt">
            <img v-if="type=='1'" src="~/assets/images/index/tit1.png" alt="">
            <img v-if="type=='2'" src="~/assets/images/index/tit2.png" alt="">
            <img v-if="type=='3'" src="~/assets/images/index/tit3.png" alt="">
            <img v-if="type=='4'" src="~/assets/images/index/tit4.png" alt="">
        </div>
        <div class="sy-boxg-blb">
            <ul>
                <li @mouseenter="curr = index" class="flex" :class="curr == index ? 'on' : ''"
                    v-for="(item, index) in list" :key="index">
                    <span class="sy-boxg-blbn">{{ index + 1 }}</span>
                    <nuxt-link class="flex1" to="">
                        <div class="sy-boxg-blba">愤怒的小鸟</div>
                        <div class="sy-boxg-blbb ovn">
                            <!-- <img :src="$used.getImgUrl(item.game_icon)" alt=""> -->
                            <div class="ml12">
                                <p class="fz16">{{item.game_name}}</p>
                                <p class="fz12">类型:益智休闲</p>
                                <p class="fz12">大小：89.52M</p>
                            </div>
                        </div>
                    </nuxt-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    //1：安卓 2：软件 3：h5 4：总榜
    type: {
        type: String,
        default: ''
    },
    list: {
        type: Array,
        default: () => []
    }
});
let curr = ref(0);

</script>

<style scoped lang="scss">
.sy-boxg-bl {
    float: left;
    position: relative;
    margin-left: 20px;
    width: 275px;
    height: 575px;
    border-radius: 10px;
    overflow: hidden;

    &::after {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        content: '';
        background: linear-gradient(180deg, #FFDC69 0%, #FEFEFF 100%);
        border-radius: 10px;
        z-index: 1;
    }

    &::before {
        position: absolute;
        left: 1px;
        top: 1px;
        right: 1px;
        bottom: 1px;
        content: '';
        background: linear-gradient(180deg, #FFEFBC 0%, #FEFEFF 100%);
        border-radius: 10px;
        z-index: 2;
    }

    .sy-boxg-blt {
        position: relative;
        margin: 1px;
        height: 74px;
        text-align: center;
        background: linear-gradient(180deg, #FFF0BF 0%, #FEFEFE 100%);
        border-radius: 10px 10px 0 0;
        padding-top: 10px;
        z-index: 4;

    }


}

.sy-boxg-blb {
    position: relative;
    margin: -1px 1px 0;
    padding: 0 16px 0;
    background-color: #ffffff;
    height: 100%;
    overflow: hidden;
    z-index: 5;

    ul {
        li {
            position: relative;
            margin-top: 20px;

            &:nth-child(-n+3) {
                .sy-boxg-blbn {
                    background-color: #FF8E2B;
                }
            }

            &.on {
                .sy-boxg-blba {
                    display: none;

                }

                .sy-boxg-blbb {
                    display: block;
                }
            }

            .sy-boxg-blbn {
                position: relative;
                display: inline-block;
                text-align: center;
                line-height: 20px;
                width: 20px;
                height: 20px;
                font-size: 16px;
                font-weight: bold;
                color: #ffffff;
                background-color: #BBBBBB;
            }

            a {
                margin-left: 18px;

                .sy-boxg-blba {}

                .sy-boxg-blbb {
                    display: none;
                    overflow: hidden;

                    img {
                        float: left;
                        width: 70px;
                        height: 70px;
                        border-radius: 10px;
                    }

                    div {
                        float: left;
                    }
                }
            }



        }
    }

}
</style>